<!--
 * @Author: your name
 * @Date: 2021-09-24 19:09:15
 * @LastEditTime: 2021-09-25 15:10:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup-ej-app\src\views\Mine\location.vue
-->
<template>
  <div>
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div id="container" style="height: 510px"></div>
    <!-- <div id="panel"></div> -->
    <van-button type="primary" size="large" @click="drive">绘制路线</van-button>
    <!-- <div style="height:80px"></div> -->
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      map: {},
      flag: 1,
      map1: {},
      driving: {},
    };
  },
  methods: {
    LoadingMap() {
      Toast.loading({
        message: "地图加载中...",
        forbidClick: true,
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    drive() {
      if (this.flag == 0) {
        this.initMap();
        this.flag = 1;
      } else if (this.flag == 1) {
        this.LoadingMap();
        this.initMap1();
        this.flag = 0;
      }
    },
    initMap() {
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.23128, 40.22077],
        zoom: 15,
      });
    },
    initMap1() {
      this.map1 = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.23128, 40.22077], //地图中心点
        zoom: 13, //地图显示的缩放级别
      });
      this.driving = new AMap.Driving({
        map: this.map1,
        // panel: "panel",
      });
      this.driving.search(
        new AMap.LngLat(116.23128, 40.22077),
        new AMap.LngLat(this.$route.query.lng, this.$route.query.lat)
      );
    },
    getLocation() {
      navigator.geolocation.getCurrentPosition((res) => {
        this.lat = res.coords.latitude;
        this.lng = res.coords.longitude;
      });
    },
  },
  mounted() {
    setTimeout(() => {
      this.initMap();
    }, 2000);
  },
  created() {
    this.LoadingMap();
    this.getLocation();
  },
};
</script>

<style scoped>
#panel {
  position: fixed;
  background-color: white;
  max-height: 50%;
  overflow-y: auto;
  top: -25px;
  right: 0px;
  width: 200px;
}
</style>